import React from 'react';
import axios from 'axios';
import { apiPrefix } from '../../../shared/api';
import Td from './TableTr';
import './index.less';

export default class Staff extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      staff: [],
      insuranceType: [],
    };
  }
  componentDidMount() {
    const api2 = `${apiPrefix}wdy_wage/api/v1/wage/insurances`;
    axios.get(api2)
      .then((response) => {
        this.setState({ insuranceType: response.data.data });
        console.log(response.data.data);
      });
    const api = `${apiPrefix}wdy_wage/api/v1/wage/additions`;
    axios.get(api)
      .then((res) => {
        this.setState({ staff: res.data.data });
        console.log(this.state.staff);
      });
  }
  sureEdit=(val) => {
    const api = `${apiPrefix}wdy_wage/api/v1/wage/addition`;
    axios.post(api, val)
      .then(() => {
        this.componentDidMount();
      });
    console.log(val);
  }
  render() {
    const { staff, insuranceType } = this.state;
    return (
      <div className="content">
        <div>
          <h3>员工管理</h3>
          <section className="content-section">
            <table>
              <thead>
                <tr>
                  <th>序号</th>
                  <th>姓名</th>
                  <th>编号</th>
                  <th>性别</th>
                  <th>身份证</th>
                  <th>社保基数档位</th>
                  <th>社保基数总额</th>
                  <th>个税金额</th>
                  <th>备注</th>
                  <th />
                </tr>
              </thead>
              <tbody>
                {
                  staff.map((value, index) => (
                    <tr key={index}>
                      <Td
                        sureEdit={val => this.sureEdit(val)}
                        value={value}
                        index={index}
                        insuranceType={insuranceType}
                      />
                    </tr>
                  ))
                }
              </tbody>
            </table>
          </section>
        </div>
      </div>
    );
  }
}
